"use client"
import TodoList from '@/components/TodoList';
import AddTodo from '@/components/AddTodo';
import TodoFilter from '../components/TodoFilter';
import { useState } from 'react';
import { Todo } from '@/types';

export default function Home() {
  const [todos, setTodos] = useState<Todo[]>([])
  const [filter, setFilter] = useState('all')

  const addTodo = (text: string) => {
    const newTodo = {
      id: Date.now(),
      text,
      completed: false
    }
    setTodos([...todos, newTodo])
  }

  const deleteTodo = (id: number) => {
    setTodos(todos.filter(todo => todo.id !== id))
  }

  const toggleTodo = (id: number) => {
    setTodos(todos.map(todo => {
      if (todo.id === id) {
        todo.completed = !todo.completed
      }
      return todo
    }))
  }

  const getFilteredTodos = () => {
    switch (filter) {
      case 'completed':
        return todos.filter(todo => todo.completed)
      case 'active':
        return todos.filter(todo => !todo.completed)
      default:
        return todos;
    }
  }

  return (
    <div className="flex justify-center items-center min-h-screen w-full">
      <div className="w-2/3 flex flex-col items-center py-10 min-h-screen">
        <h1 className="text-3xl font-bold mb-8 text-purple-200">TodoList</h1>
        <div className="w-3/4">
          <AddTodo addTodo={addTodo}></AddTodo>
          <TodoList todos={getFilteredTodos()} deleteTodo={deleteTodo} toggleTodo={toggleTodo}></TodoList>
          <TodoFilter setFilter={setFilter}></TodoFilter>
        </div>
      </div>
    </div>
  )
}
